<template>
  <div class="check_rights">
    <!-- 页面主体 -->
    <div class="tab-view data-view">
      <div class="panel-table">
        <el-table :data="rightsTableData"
                  size="small"
                  highlight-current-row
                  style="width: 100%">
          <el-table-column prop="role"
                           label="员工角色"
                           align="left"
                           :resizable = "false"
                           width="180">
            <template slot-scope="scope">
              {{ scope.row.role !== null && scope.row.role !== undefined ? scope.row.role : 0 }}
              <span><i class="iconfont official">&#xe607;</i></span>
            </template>
          </el-table-column>
          <el-table-column prop="rightsDesc"
                           align="left"
                           :resizable = "false"
                           label="权限描述">
            <template slot-scope="scope">{{ scope.row.rightsDesc !== null && scope.row.rightsDesc !== undefined ? scope.row.rightsDesc : 0 }}</template>
          </el-table-column>
          <el-table-column align="center"
                           label="操作"
                           width="100">
            <template slot-scope="scope">
              <el-button class="tool_desc" @click="navTorightsView(scope.row.roleRank)" type="text" size="small">查看</el-button>
              <!-- <el-button type="text" size="small">编辑</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">

import { mapGetters } from 'vuex'

// element-ui
import { Table, TableColumn, Input, Button } from 'element-ui'

const roleTableList = [
  {
    role: '高级管理员',
    rightsDesc: '具备平台所有的管理权限。',
    roleRank: 0
  },
  {
    role: '普通管理员',
    rightsDesc: '具备除了“添加管理员”、“删除管理员”、“删除店铺”之外的店铺所有管理权限。',
    roleRank: 1
  },
  {
    role: '店员',
    rightsDesc: '具备除了“设置”、“导购信息”之外的数据查看相关权限。',
    roleRank: 2
  }
]

export default {
  name: 'RightsTab',

  components: {
    // elementUI component
    elTable: Table,
    elTableColumn: TableColumn,
    elInput: Input,
    elButton: Button
  },

  created () {
    // init request
  },

  data () {
    return {
      queryShop: ''
    }
  },

  computed: {
    ...mapGetters([
      'mallId',
      'token'
    ]),
    rightsTableData () {
      return roleTableList
    }
  },

  methods: {
    navTorightsView (roleRank) {
      this.$router.push({
        name: 'RightsView',
        query: {
          tabName: 'rightsTab',
          roleRank
        }
      })
    },
    // 表格单元格加样式
    addStyle ({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 3) {
        return { 'color': '#0abf5b', 'height': '80px' }
      }
    }
    // ======= API ==================

  }
}
</script>

<style lang="less" rel="stylesheet/less">
  // scoped
  .check_rights{
    .tab-view {
      .panel-title {
        .search_box{
          float: right;
          width: 180px;
          text-align: right;
          font-size: 16px;
        }
      }
      .panel-charts {
        padding: 20px 0;
        width: 100%;
        height: 350px;
      }
      .panel-table {
        padding: 10px 0;
        width: 100%;
        .official {
          color: red;
          font-size: 21px;
        }
        .tool_desc {
          color: #2396f3;
        }
      }
    }
  }
</style>
